<template>
  <div class="homefooter">
    <!-- 碳排放构成 -->
    <div class="footlittle">
      <div class="paiming">
        <div class="title">电站排名(TOP5)</div>
        <div>
          <el-radio-group v-model="radio3" size="mini" @change="getfenxi">
            <el-radio-button label="1">发电量</el-radio-button>
            <el-radio-button label="2">PR</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="tongbiech" ref="tongbiech"></div>
    </div>
    <!-- 用电量排名 -->
    <div class="footlittle">
      <div class="title">碳排分析</div>
      <div class="tanpaifenxi">
        <div class="littdun">
          <div class="zhongjian">
            <div>
              <img src="../../../../assets/Photovoltaic/CO2.png" alt="">
              <span class="fontsty"><span class="tongyi co2">{{ (+entityvalue.cumulativeReductionCarbon).toFixed(3) }}</span> <span class="co2"> 吨</span></span>
            </div>
            <div class="jianshao">减少CO2排放量</div>
          </div>
        </div>
        <div class="littdun">
          <div class="zhongjian">
            <div>
              <img src="../../../../assets/Photovoltaic/so2.png" alt="">
              <span class="fontsty"><span class="tongyi cso2">{{ (+entityvalue.cumulativeReductionSO2).toFixed(3) }}</span> <span class="cso2"> 吨</span></span>
            </div>
            <div class="jianshao">减少SO2排放量</div>
          </div>
        </div>
        <div class="littdun">
          <div class="zhongjian">
            <div>
              <img src="../../../../assets/Photovoltaic/mei.png" alt="">
              <span class="fontsty"><span class="tongyi mei">{{ (+entityvalue.cumulativeReductionStandardCoal).toFixed(3) }}</span> <span class="mei"> 吨</span></span>
            </div>
            <div class="jianshao">减少标煤</div>
          </div>
        </div>
        <div class="littdun">
          <div class="zhongjian">
            <div>
              <img src="../../../../assets/Photovoltaic/tree.png" alt="">
              <span class="fontsty"><span class="tongyi tree">{{ (+entityvalue.reductionForest).toFixed(3) }}</span> <span class="tree"> 棵</span></span>
            </div>
            <div class="jianshao">减少森林砍伐</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 用能异常 -->
    <div class="footlittle">
      <div class="title">电站报警</div>
      <div class="gaojingss" ref="gaojings">
        <div class="xunhuanl" v-for="(item,index) in gaojinglist" :key="index" :style="{color:item.eventLevelName=='轻微'?'#29c2cd':item.eventLevelName=='普通'?'#ec975b':'red'}">
          [{{ item.eventLevelName }}告警] {{ item.alarmTime }} {{ item.eventDesc }} 告警值{{ item.alarmValue }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {infinitScroll} from '@/utils/array'
import {getloginuserapi} from '@/api/cycle'
import {getyichangshebeiapi} from '@/api/energy-consumption/GeneralSituation/UserPage' 
import * as echarts from 'echarts';
import {getdianzhanquxianapi} from '@/api/Photovoltaic/analysis/InverterAnaly'
export default {
  name: 'CallPoliceFooter',
  props: {
    entityvalue: {
      type:Object
    }
  },
  data() {
    return {
      radio3: '1',
      gaojinglist: []
    };
  },

  async mounted() {
    this.getfenxi(this.radio3)
    const {data:{entity}} = await getloginuserapi()
    const {data:{list}} = await getyichangshebeiapi({ _pageNo: 0, _pageSize: 100, isProcessed: false, orgNo:entity.orgNo, orgType:entity.orgType, alarmType: '' })
    this.gaojinglist=list
    if(this.gaojinglist.length) return infinitScroll(this.$refs.gaojings)
  },

  methods: {
    // 获取排名图表
    async getfenxi(val) {
      var chartDom = this.$refs.tongbiech
      var myChart = echarts.init(chartDom);
      var option;
      const loading = this.$loading({
        lock: true,
        text: 'loading',
        spinner: 'el-icon-loading',
        target: chartDom
      });
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month = mon < 10 ? '0' + mon : mon
      const { data: { list } } = await getdianzhanquxianapi({
        dateString:year+'-'+month ,dateType:'2'
      })
      const datalist = list.map(ele => {
        return val=='1'?ele.dailyQuantity:ele.performance
      })
      const timePoints=list.map(ele=>ele.name)
      option = {
        color:['#5087ec'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // legend: {},
        grid: {
          top:'4%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: timePoints
        },
        series: [
          {
            name: this.radio3=='1'?'发电量':'PR',
            type: 'bar',
            data: datalist
          }
        ]
      }
      myChart.clear();
      option && myChart.setOption(option);
      loading.close()
    }
  },
};
</script>

<style scoped>
.homefooter{
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 10px;
    justify-content: space-between;
  .footlittle{
    background-color: #fff;
    padding: 15px;
    height: 100%;
    .title{
      font-weight: bold;
      color: #323232;
    }
    .paiming{
      display: flex;
      justify-content: space-between;
    }
    .tongbiech{
      height: 86%;
    }
    .gaojingss{
      height: 86%;
      padding-top: 10px;
      overflow-x: hidden;
        overflow: hidden scroll;
      .xunhuanl{
        margin-bottom: 10px;
        font-size: 14px;
      }
    }
    .tanpaifenxi{
      height: 88%;
      display: flex;
      flex-wrap: wrap;
      .littdun{
        width: calc(50% - 10px);
        height: calc(50% - 10px);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        background-color: #fff;
        border-radius: 15px;
        /* filter: drop-shadow(rgba(0, 0, 0, .15) 3px 3px 6px); */
        margin: 5px;
        .zhongjian{
          display: flex;
          flex-direction: column;
          align-items: center;
          img{
            vertical-align: middle;
            margin-right: 10px;
          }
          .fontsty{
            font-style: italic;
            .tongyi{
              font-size: 18px;
            }
            .co2{
              color: #4fa5ff;
            }
            .cso2{
              color: #0de2f5;
            }
            .mei{
              color: #707070;
            }
            .tree{
              color: #8bba28;
            }
          }
          .jianshao{
            margin-top: 0px;
          }
        }
      }
    }
  }
}
::v-deep .el-progress__text{
  display: none !important;
}
 ::v-deep .gundong::-webkit-scrollbar {
        display: none !important;
    }
    ::v-deep ::-webkit-scrollbar {
    display: none;
}
</style>